<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue路由</title>
    <script src="js/vue.js"></script>
    <script src="js/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <!--<self-home />-->
        <router-link to="/room1">一号厅</router-link>
        <router-link to="/room2">二号厅</router-link>
        <router-view></router-view>
    </div>

    <template id="room-1">
        <div>
            <h3>1号厅</h3>
            <p>李焕英</p>
        </div>
    </template>
    <script>
     var room1=Vue.component('room-1',{
           template: '#room-1'
        });
    </script>

    <template id="room-2">
        <div>
            <h3>2号厅</h3>
            <p>刺杀小说家</p>
        </div>
    </template>
    <script>
       var room2= Vue.component('room-2',{
            template: '#room-2'
        });
    </script>



    <!--<script type="text/x-template" id="self-home"></script>-->
    <template id="self-home">
        <div>
            <h3>{{title}}</h3>
        </div>
    </template>

    <script>
        Vue.component('self-home',{
            template:'#self-home',
            data(){
                return{
                    title:'我是首页'
                }
            }
        });
    </script>



    <script>
        //路由实例，遥控器，电影院
        var router=new VueRouter({
            //所有路由组件
            routers:[
                {
                    path:'/room1',//路径
                    component:room1//路径下展示的组件
                },
                {
                    path:'/room2',
                    component:room2
                },
            ]
        });
        //实例化对象
        var vue=new Vue({
            el:'#app',
            router
        });
        /*路由：*/
    </script>


</body>
</html>